<template>
	<view class="container">
		<view class="tip_top">重置密码需验证账户身份</view>
		<view class="yzm-tips">验证码已发送至</view>
		<view class="mobile">
			+{{urlData.code}} {{urlData.mobile}}
		</view>
		<view class="yzm-input">
			<view class="bg">
				<view v-for="i in 6" class="bg-item">{{i}}</view>
			</view>
			<view class="number">
				<view v-for="i in yzm" class="number-item">{{i}}</view>
			</view>
			<input class="input" maxlength="6" v-model="yzm" type="number" />
		</view>
		<view :style="{opacity:timeShow?1:0}">
			<view v-if="time>0" class="time">{{time}}S 后重新获取验证码</view>
			<view v-else @click="sendYzm(true)" class="time-send">获取验证码</view>
		</view>
		<view @tap="nextStep" :class="['xjs-btn-primary',!parseInt(yzm)?'xjs-btn-disabled':'','btn']">下一步</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onUnload, onHide } from '@dcloudio/uni-app'
	import { reactive, onMounted, computed, ref } from 'vue'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	let urlData = reactive<any>({
		code: "86",
		mobile: '',
		isAgain: ""
	})
	const yzm = ref("")
	const timeShow = ref(false)
	const time = ref(60)
	const timer = ref(null)
	onLoad((query) => {
		setTimeout(() => {
			timeShow.value = true
		}, 1200)
		urlData.mobile = userInfo.value.phone
		uni.setStorageSync('storage_verify_mobile_pay', urlData.mobile);
		sendYzm(urlData.isAgain == "true")
	})
	const sendYzm = async (status : any) => {
		if (status) {
			uni.setStorageSync('storage_verify_endTime_pay', new Date().getTime() + 60000);
			//暂时全部默认123456,先用默认掉接口
			const res : any = await api({
				method: 'get',
				url: `/mobile/code?mobile=${urlData.mobile}&type=pay&countryCode=${urlData.code}`
			})
			if (res.code !== 0) {
				uni.showToast({
					icon: 'none',
					mask: true,
					title: res.msg
				})
			}else{
				uni.showToast({
					icon: 'none',
					mask: true,
					title: "验证码已发送，请注意查收"
				})
			}
		} else {
			//yzm.value = uni.getStorageSync('storage_verify_yzm_pay')
		}
		countDown()
	}
	//倒计时
	const countDown = () => {
		timer.value = setTimeout(() => {
			time.value = Math.floor((uni.getStorageSync('storage_verify_endTime_pay') - new Date().getTime()) / 1000)
			if (time.value < 0) {
				uni.setStorageSync('storage_verify_endTime_pay', "");
				uni.setStorageSync('storage_verify_mobile_pay', "");
				return
			}
			countDown()
		}, 1000)
	}
	const nextStep = async () => {
		if (yzm.value.trim().length <= 0) {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: "请输入6位数验证码"
			})
			return
		}
		const res : any = await api({
			method: 'get',
			url: `/check/mobile/code?mobile=${urlData.mobile}&code=${yzm.value}&type=pay&countryCode=${urlData.code}`
		})
		if (res.code=='0') {
			uni.redirectTo({
				url: '/pages/myStudio/studio/setPaymentPassword/index'
			});
		} else {
			uni.showToast({
				mask: true,
				icon: 'none',
				title: res.msg
			})
		}
	}
	onHide(() => {
		//uni.setStorageSync('storage_verify_yzm_pay', yzm.value);
		if (timer.value) {
			clearTimeout(timer.value)
		}
	})
	onUnload(() => {
		//uni.setStorageSync('storage_verify_yzm_pay', yzm.value);
		if (timer.value) {
			clearTimeout(timer.value)
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff !important;
		min-height: 100vh;
		padding: 0 34rpx;
		box-sizing: border-box;
		.tip_top{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			padding-top: 80rpx;
		}
		.yzm-tips {
			color: #5C5E5E;
			padding-top: 32rpx;
			font-size: 26rpx;
			text-align: center;
		}

		.mobile {
			text-align: center;
			font-size: 48rpx;
			font-weight: bold;
			padding: 32rpx 0 80rpx;
		}

		.yzm-input {
			position: relative;
			margin-bottom: 48rpx;
			overflow: hidden;
			box-sizing: border-box;
			.bg {
				display: flex;

				.bg-item:first-child {
					border: 1rpx solid var(--color-primary);
				}

				.bg-item {
					width: calc(90% / 6);
					height: 104rpx;
					border: 1rpx solid #F5F6F7;
					background-color: #F5F6F7;
					border-radius: 32rpx;
					text-align: center;
					line-height: 104rpx;
					font-size: 48rpx;
					font-weight: bold;
					color: #F5F6F7;
					box-sizing: border-box;
					margin-right: 2%;
				}

				.bg-item:last-child {
					margin-right: 0;
				}
			}

			.number {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				display: flex;

				.number-item {
					width: calc(90% / 6);
					height: 104rpx;
					text-align: center;
					line-height: 104rpx;
					font-size: 48rpx;
					font-weight: bold;
					border: 1rpx solid var(--color-primary);
					box-sizing: border-box;
					border-radius: 32rpx;
					margin-right: 2%;
				}

				.number-item:last-child {
					margin-right: 0;
				}
			}

			.input {
				position: absolute;
				left: -75vw;
				top: 0;
				width: 175vw;
				height: 104rpx;
				opacity: 0.01;
				z-index: 10;
			}
		}

		.time {
			font-size: 26rpx;
			color: #5C5E5E;
			text-align: center;
		}

		.time-send {
			font-size: 26rpx;
			text-align: center;
			color: var(--color-primary);
		}

		.btn {
			margin-top: 96rpx;
		}
	}
</style>